<template>
	<view class="index-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="false" color="#000" :topBgColor="topBgColor" title="零工超市"></CustomNav>
		<view class="search-block block" :style="'margin-top:'+mt">
			<view @click="choosePosition" class="position-block">
				<view class="name">{{position?position.address:'暂无位置信息'}}</view>
				<view class="iconfont icon-xiala"></view>
			</view>
		</view>
		<swiper class="swiper-block block">
			<swiper-item class="swiper-item" v-for="item in swiper" :key="item.id">
				<image :src="item.url"></image>
			</swiper-item>
		</swiper>
		<view class="menu-block block">
			<view @click="item.id==0?navigate('/page_other/work_type/choose_list?type=2'):navigate('/page_other/work/search?type='+item.id+'&name='+item.name)" class="menu-item" v-for="item in menu" :key="item.id">
				<image class="menu-icon" :src="item.icon"></image>
				<view class="menu-name">{{item.name}}</view>
			</view>
		</view>
		<image @click="navigate('/page_other/post/index')" class="rule-entrance block" :src="`${cloudStorage}/index/post.png`"></image>
		<view class="list-block block">
			<view class="list-head">
				<view class="list-title FZHZGBJ">推荐零活</view>
				<view @click="navigate('/page_other/work/search?type=0')" class="screen-block">
					<view class="screen-name">更多</view>
					<view class="screen-icon iconfont icon-arrow-right"></view>
				</view>
			</view>
			<view class="list-content">
				<template v-if="list.length>0">
					<WorkItem :detail="item" v-for="item in list" :key="item.id"></WorkItem>
				</template>
				<template v-else>
					<view class="empty">暂无数据</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {getWorkPublicList,getIndexMenuWorkType} from '@/api/work.js'
	import {getSwiperList} from '@/api/conf.js'
	import {getAuthorize,getLocation,chooseLocation} from '@/util/util.js'
	import WorkItem from '@/components/WorkItem/WorkItem'
	export default {
		components:{WorkItem},
		data() {
			return {
				menu:[],
				position:null,
				topBgColor: 'rgba(0,0,0,0)',
				list:[],
				swiper:[],
			}
		},
		watch:{
			position(){
				this.getList();
			}
		},
		methods:{
			async choosePosition(){
				await getAuthorize('scope.userLocation','定位');
				let currentPosition=await getLocation()
				let position=await chooseLocation(currentPosition.latitude,currentPosition.longitude)
				this.$store.commit('position/SET_POSITION',{address:position.name,latitude:position.latitude,longitude:position.longitude})
			},
			async getList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				
				const position=this.$store.getters.position;
				let conf={page:1,limit:10,order:1};
				if(position){
					conf.longitude=position.longitude;
					conf.latitude=position.latitude
				}
				getWorkPublicList(conf).then(res=>{
					this.list=res.list
				})
			},
			setPosition(){
				this.position=this.$store.getters.position;
			},
			async getMenu(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let res=await getIndexMenuWorkType({limit:4})
				this.menu=res;
				this.menu.push({id:0,name:'全部',icon:'/static/image/work_type.png'})
			},
			async getSwiper(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getSwiperList().then(res=>{
					this.swiper=res;
				})
			}
		},
		onUnload() {
			uni.$off('position')
		},
		async onLoad() {
			await this.getMenu()
			await this.getSwiper()
			await this.getList();
			this.setPosition()
			uni.$on('position',()=>{
				this.setPosition()
			})
		}
	}
</script>

<style scoped lang="scss">
	.index-page {
		overflow: hidden;
		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}
		.block{
			width: $content-width;
		}
		.search-block{
			display: flex;
			align-items: center;
			margin: 0 auto;
			
			.position-block{
				display: flex;
				align-items: center;
				.name{
					font-size: 32rpx;
					margin-right: 20rpx;
					font-weight: bold;
				}
				.iconfont{
					font-size: 24rpx;
				}
			}
			// .search{
			// 	height: 80rpx;
			// 	width: calc(100% - 160rpx);
			// 	background: rgba(255, 255, 255, .5);
			// 	border-radius: 20px;
			// 	padding:0 20rpx;
			// 	display: flex;
			// 	align-items: center;
			// 	.search-icon{
			// 		width: 40rpx;
			// 		height: 40rpx;
			// 		margin-right: 20rpx;
			// 	}
			// 	.search-input{
			// 		width: calc(100% - 60rpx);
			// 		height: 100%;
			// 		font-size: 28rpx;
			// 	}
			// }
			
		}
		.swiper-block{
			margin: 30rpx auto;
			height: 350rpx;
			overflow: hidden;
			border-radius: 10px;
			.swiper-item{
				width: 100%;
				height: 100%;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.menu-block{
			display: flex;
			margin: 0 auto;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			border-radius: 10px;
			height: 190rpx;
			padding: 0 20rpx;
			.menu-item{
				flex-grow: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.menu-icon{
					width: 80rpx;
					height:80rpx;
				}
				.menu-name{
					font-size: 24rpx;
					margin-top: 12rpx;
				}
			}
		}
		.rule-entrance{
			margin: 30rpx auto;
			height: 200rpx;
		}
		.list-block{
			margin: 0 auto;
			.list-head{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.list-title{
					font-size: 32rpx;
				}
				.screen-block{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					padding: 6rpx 20rpx;
					margin-left: 12rpx;
					color: #999;
					.iconfont{
						font-size: 24rpx;
						margin-left: 2rpx;
					}
				}
			}
			.list-content{
				width: 100%;
				margin:30rpx auto;
			}
		}
	}
</style>